function onClick() {
  //添加两个必要class和div
  $(`input`).eq(1).addClass(`queryInput`)
  $(`.search-result`).append(`<div class="result-list"></div>`)
  //点进来
  $(`.search`).click(
    () => {
      $(`.search-wrap`).css(
        `display`, `block`
      )
      $(`.queryInput`).focus()

      //渲染二级框
      $(`.result-list`).html(`<div data-v-62c31e8d="" class="ypc-list"></div> `)

      //锁定document滚动条
      // var top = $(document).scrollTop();
      // $(document).on('scroll.unable', function (e) {
      //   $(document).scrollTop(top);
      // })

      //隐藏滚动条
      $(`body`).css(`overflow-y`, `hidden`)

    }
  )
  //点出去
  $(`.close`).click(
    () => {
      $(`.search-wrap`).css(
        `display`, `none`
      )

      //删除二级框
      $(`ypc-list`).remove()

      //删除搜索框字以及X
      $(`.queryInput`).val(``)
      $(`.clear`).remove()

      //解除document滚动条锁定
      // $(document).unbind("scroll.unable");

      //显示滚动条
      $(`body`).css(`overflow-y`, `auto`)
    }
  )
}
onClick()

//input搜索框业务
function queryRender() {
  let i = true
  $(`.queryInput`).on(
    `input`,
    function () {
      if (i) {
        $(`.text-container`).append(`<div class="clear"></div>`)
        i = false
      }
      $(`.clear`).click(function () {
        $(`.queryInput`).val(``)
        $(this).remove()
        i = true
      })
      if ($(this).val() === ``) {
        $(`.clear`).remove()
        i = true
      }
    }
  )

}
queryRender()


//获取数据
function getQueryData() {

  let count = 1
  let inputRender = function () {
    count = 1
    $(`#searchResult`).scrollTop(0)
    $.ajax({
      type: "GET",
      url: "/data_sy_ss",
      data: `keyWord=${encodeURI($(`.queryInput`).val())}&pageNo=${count}&pageSize=20`,
      success: function (response) {
        queryRenderBook(response, count)
        count++
      }
    });
  }

  $(`.search-btn`).click(inputRender)
  $(document).keydown(function (event) {
    if (event.code === `Enter`) {
      inputRender()
    }
  });


  //监控搜索滚动条，加上截流
  $(`#searchResult`).scroll(throttle(function () {
      if ($(`#searchResult`).scrollTop() - ($(`.result-list`).height() - $(`#searchResult`).height()) >= -40) {
        $.ajax({
          type: "GET",
          url: "/data_sy_ss",
          data: `keyWord=${encodeURI($(`.queryInput`).val())}&pageNo=${count}&pageSize=20`,
          success: function (response) {
            count++
            queryRenderBook(response)
          }
        });
      }
    },1000)
  )
}
getQueryData()

//渲染数据
function queryRenderBook(data, count) {

  let queryRenderBook_a = ``
  for (let i = 0; i < data.data.bookList.length; i++) {
    queryRenderBook_a +=
      `
        <div data-v-4ba8fd4c="" class="book-large result-item" data-v-62c31e8d="" onclick="location.href='http://127.0.0.1:8080/QQLB/src/pages/QQread-book.html?bid=${data.data.bookList[i].bid}'">
        <div data-v-4ba8fd4c="" class="book"><img data-v-4ba8fd4c=""
            src="https://wfqqreader-1252317822.image.myqcloud.com/cover/${data.data.bookList[i].bid%1000}/${data.data.bookList[i].bid}/b_${data.data.bookList[i].bid}.jpg" class="ypc-book-cover">
        </div>
        <div data-v-4ba8fd4c="" class="content">
          <p data-v-4ba8fd4c="" class="title ypc-link">
          ${data.data.bookList[i].title}
          </p>
          <p data-v-4ba8fd4c="" class="intro">
          ${data.data.bookList[i].intro}
          </p>
          <p data-v-4ba8fd4c="" class="other"><span data-v-4ba8fd4c="">${data.data.bookList[i].author}</span> <span data-v-4ba8fd4c="">·${data.data.bookList[i].category3Name}</span>
            <span data-v-4ba8fd4c="">·连载</span> <span data-v-4ba8fd4c="">·${parseInt(data.data.bookList[i].totalWords/10000)}万字</span></p>
        </div> <button data-v-a9885818="" data-v-4ba8fd4c=""
          class="ypc-btn ypc-btn-primary is-plain ypc-btn-normal"><span data-v-a9885818="">开始阅读</span></button>
        </div>
      `
  }

  if (count === 1) {
    queryRenderBook_a += `<div data-v-62c31e8d="" class="bottom loading loadingIng">
    <img data-v-62c31e8d=""src="../static/icon-loading.a2da16d.svg" alt="loading" class="icon"> 
    <span data-v-62c31e8d=""class="txt">正在加载</span>
    </div> `
    $(`.ypc-list`).html(queryRenderBook_a)
  } else {
    $(`.loadingIng`).before(queryRenderBook_a)

  }
  if (data.data.bookList.length < 20) {
    $(`.loadingIng`).removeClass(`loading`).addClass(`finished`).text(`以显示全部`).children(`img`).remove()
  }

}

//刷新业务
function upTop(thisSY) {
  $(`.default`).append(`       
  <div class="qrcode-wrapper-small boxRf" data-v-51cc9442="" style="bottom: 120px;">
    <div data-v-51cc9442="" class="qrcode-place"><img data-v-51cc9442="" src="../static/icon-loading.a2da16d.svg">
      <p data-v-51cc9442="">刷新</p>
    </div>
  </div>
  
  <div class="qrcode-wrapper-small boxUp" data-v-51cc9442="" style="bottom: 40px;">
    <div data-v-51cc9442="" class="qrcode-place"><img data-v-51cc9442="" src="../static/up.png">
      <p data-v-51cc9442="">回到顶部</p>
    </div>
  </div>
  `)



  $(`.boxUp`).css(
    `display`, `none`
  )

  $(document).scroll(function () {
    if ($(document).scrollTop() >= 200) {
      $(`.boxUp`).css(
        `display`, `block`
      )
    } else {
      $(`.boxUp`).css(
        `display`, `none`
      )
    }
  })

  $(`.boxRf`).click(function () {
    thisSY.getData()
  })
  $(`.boxUp`).click(function () {
    $('html,body').animate({
      scrollTop: `0px`
    }, 800)
  })

}


//渲染点击跳转
function clickLink() {
  $(`.ypc-link`)[0].onclick = function () {
    window.location.href = `http://127.0.0.1:8080/QQLB/src/pages/QQread-home.html`
  }
  $(`.ypc-link`)[1].onclick = function () {
    window.location.href = `http://127.0.0.1:8080/QQLB/src/pages/QQread-ranking.html`
  }
  $(`.ypc-link`)[2].onclick = function () {
    window.location.href = `http://127.0.0.1:8080/QQLB/src/pages/QQread-bookshelf.html`
  }
  $(`.logo`).click(function () {
    window.location.href = `http://127.0.0.1:8080/QQLB/src/pages/QQread-home.html`
  })
}
clickLink()